<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" >
<head>
  <meta content="text/html;charset=UTF-8"/>
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  <title>The OpenAPI Specification Tools - Style Check Validator</title>

  <link href="asserts/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/4.3.1/css/bootstrap.css}" rel="stylesheet">
</head>

<body>

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <!-- Navbar content -->
    <a class="navbar-brand" href="#">Apache ServiceComb Toolkit OAS Validator</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#" th:href="@{/}">首页</a>
        </li>
      </ul>
    </div>
  </nav>
  
  <div style="height: 50px;"></div>

  <div class="container">
    
    <h2>风格校验 &nbsp;&nbsp;&nbsp;&nbsp;<span style="font-size: 1rem;">[<a href="https://github.com/apache/servicecomb-toolkit/blob/master/oas-validator/README.md" target="_blank">文档</a>]</span> </h2>
    <div class="" style="height: 20px;"></div>
  
    <div>
      <textarea name="yaml" placeholder="OpenAPI Document（yaml）" style="width: 80%; height: 480px;"></textarea>
      <div>
      <button id="styleValidate" class="btn btn-info">风格校验</button>
      </div>
    </div>
    
    <div class="" style="height: 20px;"></div>
    
    <div>
      <code id="styleViolations"></code>
    </div>

    <div class="" style="height: 20px;"></div>
  
  </div>
  
    
  <script type="text/javascript" src="" th:src="@{/webjars/jquery/3.0.0/jquery.js}"></script>
  <script type="text/javascript" src="" th:src="@{/webjars/bootstrap/4.3.1/js/bootstrap.js}"></script>
  
  <script type="text/javascript">

    var addParseErrors = function(element, parseErrors) {

      if (parseErrors && parseErrors.length > 0) {
        element.append("Parse errors:");
        element.append("<br/>");
        $.each(parseErrors, function(i) {
          var parseError = parseErrors[i];
          element.append(parseError);
          element.append("<br/>");
        })
        return false;
      }
      return true;
    }

    $(function(){
    
    $('#styleValidate').on('click', function(e) {
      var url = "/api/style";
      
      var yaml = $('textarea[name="yaml"]').val(); if (yaml=="") {return;}
      
      var data = yaml
      
      post(url, data, function(json) {
        console.log(json);
        
        if (!json.acknowleged) {
          alert('出错了');
        }
        
        var data = json.data;

        var styleViolations = $("#styleViolations");
        styleViolations.empty();

        if (!addParseErrors(styleViolations, data.parseErrors)) {
          return;
        }

        var violations = data.violations;
        if (violations && violations.length == 0) {
          alert('文档合规');
        }

        $.each(violations, function(i) {
          var violation = violations[i];
          
          var locationPath = "";
          $.each(violation.location.path, function(j) {
            var p = violation.location.path[j];
            locationPath += p.name+'.';
          });
          if (locationPath.length > 0) {
          	locationPath = locationPath.substring(0, locationPath.length-1);
          }
          
          var errorInfo = ""+ locationPath + " : " + violation.error;
          
          styleViolations.append(errorInfo);
          styleViolations.append("<br/>");
        });
        
      });
    });

  });
  
  function post(url, data, cb) {// application/json // text/plain
    
    $.ajax({
      url: url, 
      data: data,
      type: 'post',
      headers: {
        "Accept": "application/json; charset=utf-8", 
        "Content-Type": "text/plain; charset=utf-8"
      },
      success: function(json) {
        cb(json);
      }
    });
    
  }
  
  </script>
  
</body>

</html>
